<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 鼠标在窗口中的位置 </title>
</head>
<style>
#linex, #liney {
	position: absolute;
	top: 0;
	left: 0;
}
#linex {
	width: 100%;
	border-top: 2px dashed #111;
}
#liney {
	height: 100%;
	border-right: 2px dashed #111;
}
/* 鼠标展示的位置信息 */
#text {
	position: absolute;
	height: 25px;
	padding: 5px;
	line-height: 25px;
	font-size: 14px;
	color: #fff;
	background: #999;
}
</style>
<body>
	<div id="linex"></div>
	<div id="liney"></div>
	<div id="text"> 鼠标展示的位置信息 </div>

<script>
/**
*@Description
*@Return 每一个事件都是有 event 对象, 就记录对象的状态，值，相关操作.
**/
document.onmousemove = (e) => {
	const pos = getXY(e);
	// x 轴
	dom("linex").style.top = pos.y + "px";
	dom("linex").style.left = pos.x + "px";
	dom("linex").style.marginLeft = -pos.x + "px";
	// y 轴
	dom("liney").style.top = pos.y + "px";
	dom("liney").style.left = pos.x + "px";
	dom("liney").style.marginTop = -pos.y + "px";
	// info
	dom("text").style.top = pos.y + 4 + "px";	
	dom("text").style.left = pos.x + 4 + "px";
	dom("text").innerHTML = "pageX:" + pos.x + ",pageY :" + pos.y + ", clientX:" + pos.x + ",clientY :" + pos.y;
};
/**
*@Description
*@Return 鼠标位置 --- 通过鼠标事件才能获取 onmousedown(鼠标按下) onmousemove(鼠标移动) onmouseup(鼠标松开)  onmouseover(鼠标进入) onmouseout(鼠标离开) onmouseenter(鼠标进入) onmouseleave(鼠标离开).
**/
function dom(id){
	return document.getElementById(id);
};
/**
*@Description
*@Return 获取 鼠标 试试位置坐标.
**/
const getXY = (e) => {
	const ev = e || window.event;
	return { x: ev.pageX, y: ev.pageY };
};
</script>
</body>
</html>
